<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_固定定位广告条</title>
    <style>
        .top{
            background-color: #5aa4ae;
            height: 120px;
            color: #fff ;
            font-size: 30px;
            /*使用固定定位 让广告条紧贴html顶部*/
            position: fixed;
            top: 0;
            /*设置宽度为视口（viewport width）宽度的100%*/
            width: 100vw;
            height: 10vh;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            left: 20px;
            background-color: #fff799;
        }
        .right{
            background-color: #f35336;
            right: 20px;
        }
        .main{
            margin-top: 130px;
        }
    </style>
</head>
<body>
        <div class="top">
            我是顶部的广告条
        </div>
        <div class="left">
            我是左侧的广告条
        </div>
        <div class="right">
            我是右侧的广告条
        </div>
        <div class="main">
            我是内容
<!--            lorem*50-->
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda beatae, corporis cum dicta
                dolores, ea expedita facilis fugit harum inventore mollitia qui quis reprehenderit saepe sit sunt
                suscipit tempora.
            </div>
            <div>Accusantium adipisci assumenda aut consequatur deserunt distinctio, ducimus eaque earum eius fugiat
                harum incidunt inventore ipsum iste laborum maxime nemo neque officiis praesentium quae rerum saepe
                tenetur vitae voluptas voluptate.
            </div>
            <div>Asperiores culpa deleniti dolores et, exercitationem ipsam itaque, pariatur possimus, praesentium
                suscipit ut vitae voluptate! Adipisci amet beatae dolorum ea enim eum ipsum itaque, nulla numquam odit
                omnis, quidem voluptatibus.
            </div>
            <div>Ab blanditiis debitis et exercitationem facere illum neque voluptate. Cumque dolorum facilis ipsum
                obcaecati possimus quos ratione. Cupiditate, error eum harum illum labore laborum nam nemo provident,
                quae tempore tenetur!
            </div>
            <div>Aperiam beatae dolorum ea enim harum illo ipsam maiores, perferendis, quam reiciendis rerum soluta sunt
                tempore. Accusamus cum cupiditate deleniti dicta dolores, dolorum, ea laboriosam maxime, nihil
                recusandae similique vel?
            </div>
            <div>Aliquam cum deserunt dignissimos expedita, hic illum neque nihil nostrum quisquam quod reiciendis
                repellat similique tempora! Ad, aspernatur et laboriosam numquam quibusdam vel! Aspernatur eligendi
                excepturi exercitationem labore vel. Odio.
            </div>
            <div>Ab aliquid aspernatur delectus doloremque ea eos et eveniet ex excepturi explicabo hic laborum, minus
                nam, nesciunt nobis numquam officiis, perspiciatis quasi quidem quo recusandae reprehenderit sequi
                temporibus unde veniam.
            </div>
            <div>Aliquam aperiam consequatur eligendi est eveniet, facere fuga illum in labore laboriosam laudantium
                quam quas quos rerum similique sunt veniam vero? Cum deleniti in, maiores sequi similique unde ut vitae.
            </div>
            <div>Ab, accusantium aliquid assumenda commodi corporis esse explicabo fugiat illo, impedit itaque, nam quam
                repellendus reprehenderit temporibus voluptatum? Aliquid blanditiis eligendi, expedita id in minus
                nostrum perspiciatis quos voluptas voluptates!
            </div>
            <div>Ab, ad aliquid animi dolorem doloremque et eum excepturi exercitationem facere obcaecati officiis
                possimus praesentium provident quam quia quo reprehenderit soluta temporibus vel voluptatibus. Aperiam
                facilis quas saepe similique vel?
            </div>
            <div>Asperiores expedita maxime nemo nulla tempore! Ab asperiores corporis eveniet facere minima nostrum
                quia quibusdam ratione temporibus voluptatum. Aliquam aperiam assumenda, ea expedita itaque laborum modi
                nesciunt quaerat sit vel!
            </div>
            <div>Ab aliquid aperiam assumenda cupiditate debitis, eaque id ipsam itaque nam neque nesciunt non voluptas,
                voluptate. Commodi consequuntur deserunt dolor dolorem, ea eaque earum id, iusto nostrum optio
                perspiciatis rem!
            </div>
            <div>A ab, accusantium adipisci aliquam amet, animi architecto consectetur corporis, cum deserunt dolorum
                eius eum expedita fuga hic itaque laborum libero obcaecati optio quam quisquam sapiente sed vero. At,
                odio?
            </div>
            <div>At cupiditate dolore doloremque, ducimus exercitationem expedita quas sapiente similique veritatis. Ab
                asperiores dignissimos, dolore doloribus dolorum error incidunt ipsam laudantium magni mollitia quidem
                quisquam saepe sit, soluta tempora ullam.
            </div>
            <div>Animi aspernatur, at commodi culpa cumque error esse fuga hic, illum, inventore iure magni
                necessitatibus nemo optio quae quas quibusdam reprehenderit repudiandae. Et hic inventore magnam, minima
                odio quasi voluptatibus.
            </div>
            <div>Accusamus animi consequatur, culpa debitis dicta dolore, doloribus, eligendi exercitationem expedita
                iste magnam minima molestias neque nesciunt nobis officia placeat provident rem reprehenderit sit. Atque
                doloremque eaque earum eligendi minima.
            </div>
            <div>A accusantium adipisci alias amet animi assumenda at consequuntur dicta, earum enim hic labore maiores
                molestiae nam necessitatibus neque nesciunt nulla numquam obcaecati optio, praesentium provident quasi
                saepe sint tempora!
            </div>
            <div>Consequatur consequuntur fugiat id ipsam natus quas qui quia. Ad blanditiis, dolores, ducimus et
                laborum laudantium nobis numquam, odit pariatur recusandae rerum veritatis voluptates. Corporis
                doloribus est fuga laborum ullam.
            </div>
            <div>A alias at autem, consequuntur corporis cum ea enim expedita facere fuga ipsam ipsum iusto laboriosam
                magni modi numquam odio officiis pariatur perferendis quae quam repudiandae similique suscipit tempore
                vero.
            </div>
            <div>Alias eligendi eos expedita possimus repellat rerum sit voluptatum. Animi eum, sapiente. A aut cumque,
                nisi repellat saepe temporibus ullam. Accusamus adipisci, animi doloribus ducimus fugiat iste odit
                repudiandae tempore?
            </div>
            <div>Animi cum dicta distinctio eum facilis, illum perferendis quibusdam quis quos saepe vero vitae. Ad
                beatae doloribus eius est, et illum inventore iure, libero magnam numquam quaerat quam recusandae velit.
            </div>
            <div>Architecto corporis hic illo, iure maiores natus necessitatibus rem sapiente sequi sint suscipit totam
                vero voluptates. Blanditiis commodi dolor eligendi facere incidunt, nisi non officia repudiandae
                sapiente sequi unde velit.
            </div>
            <div>Animi architecto doloremque ea, enim eum excepturi fuga, fugiat impedit in ipsa laudantium minus
                molestiae nihil officia placeat quibusdam, quisquam quo repellat sapiente sit tenetur velit voluptas.
                Animi, id, voluptatem!
            </div>
            <div>Error eum eveniet labore modi nostrum officia rerum sapiente sequi tempore unde. Accusamus ad adipisci,
                autem dolor eaque eius facere facilis id iure officia quam veniam voluptatum. Alias, ducimus sapiente.
            </div>
            <div>Ab blanditiis dolor eos facilis libero rem tempora? Ab accusamus, aliquid asperiores at corporis error
                esse, incidunt ipsam modi molestiae molestias obcaecati quaerat, qui quisquam rerum suscipit veritatis
                vitae voluptatum?
            </div>
            <div>Consequatur earum explicabo in incidunt, itaque magni molestiae nihil nostrum odit repudiandae sapiente
                sint sit temporibus vel voluptatem! Alias aliquid animi architecto eveniet minima natus odit praesentium
                quae, unde velit.
            </div>
            <div>Assumenda blanditiis deleniti id quas recusandae. Aliquid aut beatae, eos fugiat illo inventore ipsam
                ipsum maiores nisi perspiciatis, repellendus repudiandae rerum, similique totam voluptate. Aperiam dicta
                fuga fugit temporibus veniam.
            </div>
            <div>Aspernatur debitis officiis omnis? Atque eum, natus nihil quae quos veritatis. Accusantium corporis
                distinctio dolorem eligendi, enim error exercitationem, expedita facilis magni mollitia nihil nobis
                obcaecati praesentium provident sint temporibus?
            </div>
            <div>Autem corporis dolores impedit nisi unde. Ab cum cumque dicta dolorum eveniet facere fugit impedit
                incidunt libero maxime natus neque nobis pariatur perspiciatis quam quas qui rem saepe ullam, vero.
            </div>
            <div>A ipsum libero magnam maxime nam nisi quo reiciendis rem sunt, voluptatibus. Earum esse, hic itaque
                minima neque nostrum numquam recusandae rem, reprehenderit sapiente ullam vel veritatis voluptates.
                Beatae, repellat!
            </div>
            <div>Amet asperiores cum cumque deserunt doloribus laudantium magnam quibusdam quos? Assumenda ducimus illo
                iste rerum velit? Aliquam earum exercitationem, expedita iure, libero natus, numquam perferendis placeat
                quidem quod totam voluptas.
            </div>
            <div>Blanditiis consequuntur dicta earum esse fugiat illo laborum neque, officia quidem reiciendis
                repellendus similique tempore velit vero voluptatum. Aliquid autem deleniti deserunt dolor doloribus
                eius laudantium magni omnis quas soluta.
            </div>
            <div>Alias aliquid aperiam cum dicta doloribus eos eum explicabo facilis fuga iste iusto labore laborum
                maiores, molestias mollitia neque nobis non, odio pariatur quasi rem sit sunt unde veniam veritatis!
            </div>
            <div>Atque cum cupiditate, deleniti dolor ducimus eaque error iure laudantium, minima molestiae nisi odio
                odit officia possimus quia quisquam repellendus reprehenderit sit sunt temporibus ullam unde veniam
                vero, voluptas voluptate!
            </div>
            <div>Accusamus autem beatae blanditiis, dicta distinctio dolore dolorem dolores ducimus et exercitationem
                expedita explicabo inventore necessitatibus nesciunt non obcaecati quaerat saepe sapiente sequi sint
                tempora ullam vitae voluptatibus? Ab, dignissimos.
            </div>
            <div>Ad consequuntur eaque et in magni maxime, nisi officiis perspiciatis repudiandae ullam unde voluptas
                voluptatum. Assumenda delectus dolore id itaque reiciendis sunt, voluptate! Aliquam debitis doloremque
                ipsam quae quod, ut.
            </div>
            <div>Ad consequuntur dignissimos eum facilis harum maxime nemo provident quae quisquam quo saepe, sed unde,
                voluptatem. Aut dolores eos fugit, illum ipsam iusto magnam, nam nihil pariatur quidem rerum sit.
            </div>
            <div>A accusamus, amet consequuntur culpa exercitationem fugit harum illo ipsa laborum, magni mollitia
                obcaecati pariatur quae! Architecto cumque dolorum fuga laboriosam nostrum quisquam repudiandae sint
                soluta tenetur voluptatum. Accusamus, dolorum?
            </div>
            <div>Amet animi consequuntur culpa laborum nam nobis odio reiciendis sequi temporibus voluptas. Dolorem ea
                ratione ut voluptas. Commodi molestias necessitatibus nobis sunt! Adipisci aliquam dicta doloremque, id
                magni omnis saepe.
            </div>
            <div>Amet, aspernatur at culpa deserunt distinctio dolorum ducimus hic illo, iure libero molestiae molestias
                mollitia nemo nulla numquam officia omnis praesentium quaerat quia quibusdam, quo sed sunt tempora
                temporibus ullam.
            </div>
            <div>Aliquam corporis culpa deleniti doloremque error est expedita, iusto neque nisi officiis, porro quos
                sunt. Accusantium at doloremque est iste labore magnam maiores possimus quasi? Aperiam dolorem et
                impedit quidem!
            </div>
            <div>Ab amet asperiores atque dicta dignissimos dolor dolore dolorem ex fuga fugiat id iste neque nostrum
                numquam officiis optio pariatur perferendis quaerat quas quia quos, rerum tempore unde voluptate
                voluptatum.
            </div>
            <div>Adipisci blanditiis corporis debitis deleniti distinctio dolor dolorem doloribus earum expedita facere
                facilis itaque maxime modi natus, perferendis porro, possimus praesentium quam quis, quisquam repellat
                sequi veritatis voluptas. Cupiditate, eum.
            </div>
            <div>At, consequuntur debitis dicta eius excepturi laborum nisi nobis quia temporibus voluptate. Ad aut
                culpa deleniti dolore doloremque eaque fuga harum illum, iste quaerat. Aliquid cum ea fuga tempora
                voluptatum.
            </div>
            <div>Cumque distinctio dolor exercitationem numquam quae quas repellendus sed sint. Assumenda consequatur
                cumque dignissimos dolore dolorem enim eos et eveniet excepturi fuga inventore minima molestiae vitae,
                voluptates voluptatibus. Eius, expedita!
            </div>
            <div>Corporis dignissimos facilis quam repellat voluptate! Adipisci animi expedita fugit harum inventore
                maxime omnis quidem quos sint soluta. Aperiam dolorem dolorum eaque error esse rerum temporibus. Alias
                beatae molestiae quam.
            </div>
            <div>Accusantium aliquam animi aspernatur culpa, deleniti et fugit maiores molestiae natus nemo neque
                obcaecati perspiciatis rem reprehenderit rerum ullam vel vero vitae, voluptatem, voluptatum. Alias
                deserunt obcaecati perspiciatis reiciendis vitae!
            </div>
            <div>Ab cum, dolores doloribus, est facere id iste mollitia, odit perspiciatis possimus provident quaerat
                quasi ratione recusandae sapiente. Aut dolorum eius fugit illo labore magni praesentium tempora ullam
                velit, voluptate.
            </div>
            <div>Aliquid doloremque ea fuga magnam molestiae quae quaerat rem reprehenderit, repudiandae ullam! Aliquid,
                enim explicabo facilis ipsam iusto libero necessitatibus nemo non placeat quasi tenetur vero voluptates
                voluptatum! Aliquam, reiciendis!
            </div>
            <div>Aspernatur delectus ducimus harum quidem saepe sequi tenetur! Amet culpa cupiditate dolores eaque illo
                in ipsa iure molestiae nemo nesciunt odio officia quis, ratione recusandae similique sint ut voluptate
                voluptatum?
            </div>

        </div>

</body>
</html>